<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>我的礼品-老师-上传礼品</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.mui-content{
				background-color: #FFFFFF;
				
			}
			.width{
				100%
			}
			.div1{
				padding-left: 10px;
			    
			}
			.div2{
				padding-right: 10px;
		 
			}
			.div3{
				border-bottom: 1px solid #eeeeee;
	            height: 70px;
			}
			.inputStyle{
				width: 100%;
				border: 1px solid #eeeeee;
				
				
			}
			
			.div4{
				width: 100%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">礼品上传</h1>
            <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" onclick="submitMessage()" style="color: white;border: none;">发布</button>
		</header>

		<div class="mui-content fill-all">
			<div class="flex width v-center div3">
				<div class="flex-2 div1">礼品描述:</div>
				<div class="flex-5 div2">
					<input class="inputStyle" type="text" placeholder="请输入礼品描述"/>
				</div>
				
			</div>
			
			<div class="flex width v-center div3">
				<div class="flex-2 div1">积   分:</div>
				<div class="flex-5 div2">
					<input class="inputStyle" type="text" placeholder="兑换此商品所需要的积分数量"/>
				</div>
				
			</div>
			<div class="flex width v-center div3">
				<div class="flex-2 div1">数   量:</div>
				<div class="flex-5 div2">
					<input class="inputStyle" type="number" placeholder="请输入礼品数量"/>
				</div>
				
			</div>
			
			<div class="flex width v-center">
				<div class="flex-2 div1">添加图片:</div>
				<div class="flex-5 div2">
					<img style="width: 50px;" onclick="addImg()" src="../img/icon-issue-add.png"/>
				</div>
				
			</div>
			
			
			
			<!--图片显示-->
			<div id="divImg" class="div4">
				
				<!--<img class="img1"  src="../img/bg-01.png">
					<img onclick="deleteImg()" class="img2" src="../img/error-icon.png" />			
				</img>-->
				<!--<div class="div5">
					<img class="img3" src="../img/error-icon.png"/>
					<img class="img1"  src="../img/bg-01.png">
				</div>-->
				
				
				
				
				
				
				
				
				
				
				
			</div>
			
		</div>	
		
		<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
		    <!-- 可选择菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(1)" href="#" >相机</a>
		      </li>
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(2)" href="#" >相册</a>
		      </li>
		    </ul>
		    <!-- 取消菜单 -->
		    <ul class="mui-table-view">
		      <li class="mui-table-view-cell">
		        <a onclick="cancle(0)" href="#sheet1" ><b>取消</b></a>
		      </li>
		    </ul>
		</div>
		
		
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			mui.init();
			//发布礼品
			function submitMessage(){
				mui.toast("提交成功")
			}
			//添加图片
			function addImg(){
				mui('#sheet').popover("show");
			}
			
			function cancle(num){
				mui('#sheet').popover("hide");
				if(num!=0){
					
					//判断是相册还是相机
					if(num==1){  //选第一个   相册
						galleryImgsMaximum();
					}else{    //选第二个     相机
						
						getImage();
					}
				}
				
			}
			
			// 拍照
			function getImage(){
			//	printLog('开始拍照：');
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p){
				//	printLog('成功：'+p); 
					
					plus.io.resolveLocalFileSystemURL(p, function(entry){
						printLog(entry.toLocalURL());
						//eTemp.push(entry.toLocalURL());
                        appendDiv(new Array(entry.toLocalURL()));
					
					}, function(e){
						mui.alert('读取拍照文件错误：'+e.message);
					});
				}, function(e){
					mui.alert('失败：'+e.message);
				}, {filename:'_doc/camera/',index:1});
			}
			//选择照片
			function galleryImgsMaximum(){
				// 从相册中选择图片
				printLog('从相册中选择多张图片(限定最多选择3张)：');
			    plus.gallery.pick(function(e){
			    	appendDiv(e.files);
			    	
//			    	var divImg = document.getElementById("divImg");
//			    	var img = "";
//			    	for(var i in e.files){			    		
//				    	printLog(e.files[i]);				    	
//				    	img += '<img class="img1" src="'+ e.files[i] +'"><img onclick="deleteImg()" class="img2" src="../img/error-icon.png" /></img>';				    				    	
//			    	}
//			    	divImg.innerHTML = img;
			    	
			    }, function(e){
			    	printLog('取消选择图片');
			    	                            //maximum可以修改选择数量
			    },{filter:'image',multiple:true,maximum:3,system:false,onmaxed:function(){
					plus.nativeUI.alert('最多只能选择3张图片');
			    }});// 最多选择3张图片
			}
			
			function deleteImg(i){
				printLog("删除了第" + i + "张"+eTemp.length);
				
				if(eTemp != null && eTemp.length > 0){
					eTemp.splice(i,1);    //删除指定位置的照片
					showDiv(eTemp);
				}
				
				
			}
			var eTemp = new Array;
			//传递进来一个图片地址集合,讲所有的图片显示出来
			function appendDiv(e){
				var arr = new Array;
				arr = eTemp.concat(e);
				eTemp = arr;
				printLog("图片还有"+arr.length);
				var divImg = document.getElementById("divImg");
		    	var div = "";
		    	for(var i in arr){			    		
			    //	printLog(arr[i]);				    	
			    //	div += '<img class="img1" src="'+ e[i] +'"><img onclick="deleteImg('+ i +')" class="img2" src="../img/error-icon.png" /></img>';				    				    	
		    	    div += '<div class="div5"><img class="img3" onclick="deleteImg('+ i +')" src="../img/error-icon.png"/><img class="img1"  src="'+ arr[i] +'"></div>';
		    	}
		    	divImg.innerHTML = div;
						
			}
			//删除掉图片之后的刷新界面
			function showDiv(e){
				
				var divImg = document.getElementById("divImg");
		    	var div = "";
		    	for(var i in e){			    		
			   
		    	    div += '<div class="div5"><img class="img3" onclick="deleteImg('+ i +')" src="../img/error-icon.png"/><img class="img1"  src="'+ e[i] +'"></div>';
		    	}
		    	divImg.innerHTML = div;
						
			}
			
			
		</script>
	</body>
</html>
